<template>
  <div class="talents" style="width: 100%;overflow: hidden;">
    <div style=" margin-top: 20px; display: flex;padding: 0px 20px;border-bottom: 1px solid #0270c1;background-color: white;width: 95%;margin-left: 12px">
      <div>
        <img src="/src/assets/hy/zhiwei.png" height="30" width="30" style="margin: 5px 10px 0px 0px"/>
      </div>
      <div style="text-align: center;line-height: 40px;">人才库：</div>
    </div>
    <div style="background:white;width: 98%;margin: 20px 1% 0px">
      <el-input v-model="talents.talentsName" placeholder="人才姓名" style="width: 200px;margin: 20px 20px "/>
      <el-input v-model="talents.talentsPhone" placeholder="电话号码" style="width: 200px;margin: 20px 20px "/>
      <el-input v-model="talents.talentsPosition" placeholder="应聘岗位" style="width: 200px;margin: 20px 0px "/>
      <el-button @click="selecttalentpool()" type="primary" style="margin-left: 20px">搜索</el-button>
      <el-button  @click="qingkong()"  plain>重置</el-button>
      <el-button @click="addTalentpool()" type="primary" style="float: right;margin: 20px 30px">新增人才</el-button>
      <el-button type="primary" style="float: right;margin: 20px 0px" @click="mianshi()">面试申请</el-button>
    </div>
    <el-dialog v-model="dialogTableVisible" title="面试安排申请" width="70%">
      <el-button @click="toggleSelection()" plain style="float: right;margin-left: 30px">退出</el-button>
      <el-button @click="queren()" type="primary" style="float: right;">提交</el-button>
      <div style="width: 950px;padding:0px 40px 10px 0px;margin:auto;margin-top: 10px;background: white">
        <div style="width: 100%;height:50px;border-bottom:1px solid rgb(220, 223, 230);line-height: 50px">
          <div style="height: 30px;width: 5px;margin: 10px 0px 0px 20px;background-color:#118dea;float: left;"></div><span style="margin-left: 10px;">基础信息</span>
        </div>
        <el-form
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :inline="true" :model="shiju" label-width="205px" style="margin: 20px 0px 0px 0px">
          <el-form-item label="流程标题">
            <el-input v-model="shiju.interTitle" />
          </el-form-item>
          <el-form-item label="HR">
            <el-input v-model="shiju.empNames" />
          </el-form-item>
          <el-form-item label="面试负责人">
            <el-input v-model="shiju.empName" />
            <el-icon style="position: relative;margin: 0px -43px 0px 0px">
              <el-button @click="dates()"><Search /></el-button>
            </el-icon>
          </el-form-item>
          <el-form-item label="面试岗位" style="margin-left: 29px">
            <el-input v-model="shiju.postsName" />
          </el-form-item>
<!--          <el-form-item label="面试申请日期">-->
<!--            <el-form-item prop="date" style="float: left">-->
<!--              <el-date-picker-->
<!--                  v-model="shiju.interDate"-->
<!--                  type="date"-->
<!--                  label="Pick a date"-->
<!--                  placeholder="Pick a date"-->
<!--                  style="width: 196px"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-form-item>-->
          <el-form-item label="安排面试日期" style="margin-left: 0px">
            <el-form-item prop="date2">
              <el-date-picker
                  v-model="shiju.interDates"
                  type="date"
                  label="Pick a date"
                  placeholder="Pick a date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 196px"
              />
            </el-form-item>
          </el-form-item>
          <el-form-item label="面试开始时间" style="float: left">
            <el-form-item prop="date3">
              <div class="demo-time-range">
                <el-time-select
                    v-model="shiju.interStarttime"
                    :max-time="shiju.interEndtime"
                    class="mr-4"
                    placeholder="Start time"
                    start="08:30"
                    step="00:15"
                    end="18:30"
                    style="width: 196px"
                />
                <span style="margin-left: 140px">面试结束时间</span>
                <el-time-select
                    v-model="shiju.interEndtime"
                    :min-time="shiju.interStarttime"
                    placeholder="End time"
                    start="08:30"
                    step="00:15"
                    end="18:30"
                    style="width: 196px;margin-left: 13px"
                />
              </div>
            </el-form-item>
          </el-form-item>
          <el-form-item label="面试形式" prop="region" style="float: left;">
            <el-select v-model="shiju.interWay" placeholder="Activity zone" style="width: 196px;">
              <el-option label="线下" value="0" />
              <el-option label="线上" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="面试阶段" prop="region" style="margin-left: -32px">
            <el-select v-model="shiju.interStage" placeholder="Activity zone" style="width: 196px;">
              <el-option label="一面" value="0" />
              <el-option label="二面" value="1" />
            </el-select>
          </el-form-item>

          <el-form-item label="说明" prop="desc">
            <el-input v-model="shiju.interElses" type="textarea" style="width: 600px"/>
          </el-form-item>
        </el-form>
        <el-dialog v-model="dialogFormVisible2" title="部门">
          <el-table :data="d.tableData2" stripe @selection-change="handleSelectionChange2"  ref="multipleTableRef2" >
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" property="empName" label="姓名" />
            <el-table-column align="center" property="employeePost.post.postName" label="岗位" />
          </el-table>
          <div>
            <el-row justify="center">
              <el-col>
                <el-pagination
                    v-model:currentPage="d.pageNo2"
                    v-model:page-size="d.pageSize2"
                    :page-sizes="[5,10, 20, 30, 40]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="d.total2"
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                />
              </el-col>
            </el-row>
          </div>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="toggleSelection2()">取消</el-button>
        <el-button type="primary" @click="queren2">确认</el-button
        >
      </span>
          </template>
        </el-dialog>
      </div>
      <div style="width: 950px;padding:0px 40px 10px 0px;margin:auto;margin-top: 10px;background: white">
        <div style="width: 100%;height:50px;border-bottom:1px solid rgb(220, 223, 230);line-height: 50px">
          <div style="height: 30px;width: 5px;margin: 10px 0px 0px 20px;background-color:#118dea;float: left;"></div><span style="margin-left: 10px;">基础信息</span>
        </div>
      </div>
      <div style="width: 800px;margin-left: 90px">
      <el-table :data="shiju.mianshiren">
        <el-table-column align="center" label="姓名" >
          <template #default="scope"><el-button @click="editTalentpool(scope.row)">{{ scope.row.talentsName }}</el-button></template>
        </el-table-column>
        <el-table-column align="center" property="talentsAge" label="年龄" />
        <el-table-column align="center" property="talentsPosition" label="应聘岗位" />
        <el-table-column align="center" property="talentsPhone" label="电话号码" />
      </el-table>
      </div>
    </el-dialog>
    <el-table
        ref="multipleTableRef"
        :data="d.tableData"
        style="width: 98%;height: 455px;margin: auto"
        :header-cell-style="{background:'#f5f7fa'}"
        stripe
        @selection-change="handleSelectionChange"
    >

      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="姓名" width="120">
        <template #default="scope"><el-button @click="editTalentpool(scope.row)">{{ scope.row.talentsName }}</el-button></template>
      </el-table-column>
      <el-table-column align="center" property="talentsAge" label="年龄" width="120"/>
      <el-table-column align="center" property="talentsPosition" label="应聘岗位" />
      <el-table-column align="center" property="talentsPhone" label="电话号码" />
      <el-table-column align="center" label="人才标签" >
        <template #default="scope">
          <div v-if="scope.row.talentsTalenttag == '高学历' " style="background:rgb(234,242,251);color:#446af3;height:30px;width:60%;margin:0 20% 0;font-size: 15px;line-height: 30px">
            {{ scope.row.talentsTalenttag }}
          </div>
          <div v-if="scope.row.talentsTalenttag == '技术达人' " style="background:rgb(217,246,229);color:#479d5c;height:30px;width:60%;margin:0 20% 0;font-size: 15px;line-height: 30px">
            {{ scope.row.talentsTalenttag }}
          </div>
          <div v-if="scope.row.talentsTalenttag == '经验丰富' " style="background:rgb(255,233,233);color:#be00fc;height:30px;width:60%;margin:0 20% 0;font-size: 15px;line-height: 30px">
            {{ scope.row.talentsTalenttag }}
          </div>
          <div v-if="scope.row.talentsTalenttag != '高学历' && scope.row.talentsTalenttag != '技术达人' && scope.row.talentsTalenttag != '经验丰富' " style="background:rgb(255,233,233);color:#be00fc;height:30px;width:60%;margin:0 20% 0;font-size: 15px;line-height: 30px">
            {{ scope.row.talentsTalenttag }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="学历">
        <template #default="scope">
            {{ scope.row.talentsEducation }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="工作经验">
        <template #default="scope">
            {{ scope.row.talentsExperience }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="添加/取消关注" >
        <!--按钮需要使用插槽才能取到当前行的值-->
        <template #default ="s" >
          <el-button v-if="s.row.talentpoolEmps[0].empId != store.state.user.sysEmployee.empId " @click="addguanzhu(s.row.talentsId)" type="primary" plain style="font-size: 12px;width: 60px;height: 30px;">
            添加关注
          </el-button>
          <el-button v-if="s.row.talentpoolEmps[0].empId == store.state.user.sysEmployee.empId " @click="delguanzhu(s.row.talentsId)" type="danger" plain style="font-size: 12px;width: 60px;height: 30px;">
            取消关注
          </el-button>

        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" >
        <!--按钮需要使用插槽才能取到当前行的值-->
        <template #default ="s" >
<!--          <el-button  type="primary" plain style="font-size: 12px;width: 60px;height: 30px;">-->
<!--            安排面试-->
<!--          </el-button>-->
          <el-button @click="qqq(s.row.talentsId)" type="danger" plain style="font-size: 13px;width: 60px;height: 30px;">
            删除人才
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="centerDialogVisible" title="信息确认" width="30%" center>
      <span>确定删除吗？</span>
      <template #footer>
              <span class="dialog-footer">
                <el-button @click="wodeguanzhu2()">确认</el-button>
                <el-button type="primary" @click=" centerDialogVisible = false;">取消</el-button
                >
              </span>
      </template>
    </el-dialog>
    <div>
    <el-row justify="center">
      <el-col>
        <el-pagination
            v-model:currentPage="d.pageNo"
            v-model:page-size="d.pageSize"
            :page-sizes="[5,10, 20, 30, 40]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="d.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    </div>
  </div>

</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref, toRefs} from 'vue'
import axios from "axios";
import {ElMessage, ElMessageBox, ElTable} from "element-plus";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {User} from "@element-plus/icons-vue/dist/types";
const input = ref('')
//当前登录者的信息
const store=useStore();
let dialogFormVisible = ref(false)
const form = reactive({
  name: '',
  talentsName:'',
  talentsPhone:'',
  region: '',
  date1: '',
  date2: '',
  type: [],
  age:'',
  post:'',
  channel:'',
  education:'',
  experience:'',
  phone:'',
})


const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  //数据
  tableData:[],
  //总记录
  total2:0,
  //页码
  pageNo2:1,
  //页大小
  pageSize2:10,
  //数据
  tableData2:[],

  //面试人信息
  // mianshiren:[],
});
//获取当前时间
import moment from 'moment';
let riqi2 = moment(new Date()).format("YYYY-MM-DD")
//默认标题
let aaa= "面试申请-"+store.state.user.sysEmployee.empName+"-"+riqi2
const shiju = reactive({
  interId:'',
  interTitle:aaa,
  empNames:store.state.user.sysEmployee.empName,
  empId:'',
  empName:'',
  // username:'',
  talentsId:'',
  postsName:'',
  interDate:'',
  interDates:'',
  interStarttime:'',
  interEndtime:'',
  interWay:'',
  interStage:'',
  interElses:'',
  mianshiren:[],
})
//选择面试负责人
let dialogFormVisible2 = ref(false)
//表格选中确定或取消后清空选中的数据
const multipleTableRef2 = ref<InstanceType<typeof ElTable>>()
const toggleSelection2 = (rows?: User[]) => {
  dialogFormVisible2.value = false
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef2.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef2.value!.clearSelection()
  }
}
//获取选中的数据存进user
const multipleSelection2 = ref<User[]>([])
const handleSelectionChange2 = (val: User[]) => {
  multipleSelection2.value = val;
  let p=multipleSelection2.value
  console.log(p[0])
  ww.empId = p[0].empId;
  ww.empName = p[0].empName;
}
const ww = reactive({
  empId:'',
  empName:'',
})
//选中负责人数据时把那条数据存进
const queren2=()=>{
  shiju.empId = ww.empId;
  shiju.empName = ww.empName;
  dialogFormVisible2.value = false
  console.log("gggggggggg")
  console.log(ww.empName)
  // toggleSelection2();
}

//根据岗位名称查询员工
const dates=()=>{
  dialogFormVisible2.value = true;
  axios.get("personnelOa/SysEmployee/postName/"+shiju.postsName)
      .then((res)=>{
        d.tableData2 = res.data.data;
        ALltableData2.value = d.tableData2;//放入表格
        d.total2 = res.data.data.length;//获得它的长度
        // getTabelData();//调用方法
      })
      .catch()
}
const ALltableData2=ref([])
const getTabelData2=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData2.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo2 - 1) * d.pageSize2,
      d.pageSize2
  )
  d.tableData2 = shu ;
}

const handleSizeChange2 = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize2 = val ;
  d.pageNo2 = 1;
  getTabelData2();
}

const handleCurrentChange2 = (val: number) => {//分页，这里没必要管一样就行
  console.log("翻页，当前为第几页", val)
  d.pageNo2 = val;
  getTabelData2();
}
const dialogTableVisible = ref(false)
const mianshi = ()=>{
  if (shiju.mianshiren[0]!=null){
    dialogTableVisible.value = true;
  }else {
    ElMessage({
      type: 'success',
      message: '请选择面试人',
    })
  }

}
//表格选中确定或取消后清空选中的数据
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const toggleSelection = (rows?: User[]) => {

  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
    dialogTableVisible.value = false;
  }
}
//获取选中的数据存进user
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
  let p=multipleSelection.value
  shiju.mianshiren = p
  shiju.postsName = p[0].talentsPosition;
  console.log(p)
}
//安排面试确认按钮
const queren = ()=>{
  console.log(shiju)
  console.log(shiju.mianshiren)
  axios.post("businessOa/interview/ddd",shiju).then((res)=>{
    console.log(res.data.data)
    if (res.data.data > 0){
      ElMessage({
        type: 'success',
        message: '新增成功',
      })
      dialogFormVisible.value = false;
    }
  })

}
const router=useRouter();
//进入简历详情页面
const editTalentpool = (row)=>{
  router.push({path:"/Recruitment/resume/tiao",query:{id:row.talentsId}})
}
const addTalentpool = ()=>{
  router.push({path:"/Recruitment/resume/tiao",query:{id:2}});
}

//条件查询表单数据模型
let  talents= reactive({
  talentsName:'',
  talentsPhone:'',
  talentsPosition:'',
})
//清空输入框的条件
const qingkong=()=>{
      talents.talentsName='',
      talents.talentsPhone='',
      talents.talentsPosition='',
      date()
}
//取消关注
let delgz=ref();
const delguanzhu=(talentsId)=>{
  axios.delete("personnelOa/talentpool/delguanzhu/"+talentsId+"/"+store.state.user.sysEmployee.empId)
      .then((res)=>{
        delgz.value = res.data.data
        console.log(ID.value)
        if (delgz.value = 1){
          ElMessage({
            type: 'success',
            message: '取消成功',
          })
          date();
        }else {
          ElMessage({
            type: 'success',
            message: '取消失败',
          })
        }
  })
}
//新增我的关注
let addgz=ref();
const addguanzhu=(talentsId)=>{
  axios.post("personnelOa/talentpool/insertguanzhu/"+talentsId+"/"+store.state.user.sysEmployee.empId)
      .then((res)=>{
        addgz.value = res.data.data
        console.log(ID.value)
        if (addgz.value = 1){
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
          date();
        }else {
          ElMessage({
            type: 'success',
            message: '添加失败',
          })
        }
  })
}
// //查询我的关注
// const wodeguanzhu=()=>{
//   axios.post("personnelOa/talentpool/wodeguanzhu/"+store.state.user.sysEmployee.empId)
//       .then((res)=>{
//     d.tableData =res.data.data;
//     ALltableData.value = d.tableData;//放入表格
//     d.total = res.data.data.length;//获得它的长度
//
//   })
// }
//条件查询出人才
const selecttalentpool=()=>{
  axios.post("personnelOa/talentpool/selectTalentpool",talents)
      .then((res)=>{
        d.tableData =res.data.data;
        ALltableData.value = d.tableData;//放入表格
        d.total = res.data.data.length;//获得它的长度


      })
      .catch()
}
//查询出人才并分页
const date=()=>{
axios.get("personnelOa/talentpool/rencai")
    .then((res)=>{
      d.tableData =res.data.data;
      ALltableData.value = d.tableData;//放入表格
      d.total = res.data.data.length;//获得它的长度
      // getTabelData();//调用方法
    })
    .catch()
}
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  console.log("翻页，当前为第几页", val)
  d.pageNo = val;
  getTabelData();
}
//一进页面就调用
onBeforeMount(()=>{
  date();
})
//表单数据模型
let Talentpool = reactive({

  talentsName:'',
  talentsSex:'',
  talentsAge:'',
  talentsBirthday:'',
  talentsPosition:'',
  talentsChannel:'',
  talentsEducation:'',
  talentsExperience:'',
  talentsPhone:'',
  talentsTime:'',
  talentsTechnology:'',
  talentsState:'',
  talentsMailbox:'',
  talentsId:'',
  talentsTalenttag:'',
  talentsNative:'',
  talentsMarriage:'',
  talentsQq:'',
  talentsAnniu:'',
})


const centerDialogVisible = ref(false)
let ID = ref();
const qqq = (id)=>{
  ID.value = id;
   centerDialogVisible.value = true

}

//查询我的关注
  let sd = ref();
  const wodeguanzhu2=()=>{
    axios.post("personnelOa/talentpool/jiaoyangz/"+ID.value+"/"+store.state.user.sysEmployee.empId)
        .then((res)=>{
          sd.value=res.data.data;
          console.log(sd.value)
          if(sd.value == null){
            deleteId();
          }else {
            centerDialogVisible.value = false;
            ElMessage({
              type: 'success',
              message: '请先取消关注!',
            })
          }
        })
  }

let del=ref();
const deleteId=()=>{
  centerDialogVisible.value = false;
  axios.put("personnelOa/talentpool/deleteTalentpool/"+ID.value)
      .then((res)=>{
        del.value = res.data.data
        console.log(ID.value)
        if (del.value > 0){
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          date();
        }else {
          ElMessage({
            type: 'success',
            message: '删除失败',
          })
        }
      })
      .catch()
}


const {tableData} = toRefs(d);
</script>

<style scoped>

.talents{
  /*border: red solid 1px;*/
  background: #F1F1F1;
  /*height: 100%;*/
  /*width: 100%;*/
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>